<script setup>
import { ref, onMounted, nextTick, onUnmounted, onDeactivated, onActivated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/stores/modules/user'
import { getWithdrawHistory } from '@/api/jdb'
import dayjs from 'dayjs'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const dataList = ref([])
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const pageNo = ref(1)
const pageSize = ref(20)

const onLoad = () => {
  if (refreshing.value) {
    dataList.value = []
    refreshing.value = false
    pageNo.value = 1
  }
  getWithdrawHistory({
    pageNum: pageNo.value,
    pageSize: pageSize.value,
    orderByColumn: 'createTime',
    isAsc: 'desc'
  }).then(response => {
    response.data.rows.forEach(o => {
      o.createTime = dayjs(o.createTime).format('YYYY-MM-DD HH:mm')
      o.price = parseFloat(o.price).toFixed(2)
      if (o.state === 0) {
        o.stateDesc = '审核中'
      }
      if (o.state === 1) {
        o.stateDesc = '审核通过'
      }
      if (o.state === 2) {
        o.stateDesc = '转账中'
      }
      if (o.state === 3) {
        o.stateDesc = '转账成功'
      }
      if (o.state === 4) {
        o.stateDesc = '转账失败'
      }
    })
    dataList.value = [...dataList.value, ...response.data.rows]
    loading.value = false
    pageNo.value++
    // // this.dataList = response.rows;
    // // this.total = response.total;
    // // this.loading = false;
    if (response.data.rows.length < pageSize.value) {
      finished.value = true
    }
  })
}
const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
const onClickLeft = () => {
  router.back()
}

const goPay = (data) => {
  router.push({
    path: '/withdraw-pay',
    query: {
      id: data.id
    }
  })
}
</script>

<template>
  <van-nav-bar title="提现记录" left-arrow fixed placeholder @click-left="onClickLeft"/>
<!--  <section style="width:92%;margin:0 auto;position: fixed;left:0;right:0;background:#fff;z-index:2">-->
<!--    <van-row class="title-row van-hairline&#45;&#45;bottom">-->
<!--      <van-col :span="12" class="title-cell">时间</van-col>-->
<!--      <van-col :span="6" class="title-cell">金额</van-col>-->
<!--      <van-col :span="6" class="title-cell">状态</van-col>-->
<!--    </van-row>-->
<!--  </section>-->
  <div style="min-height: 100vh; background-color:#eee">
    <section style="padding-bottom:50px;width:94%;margin:0 auto;">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <van-cell-group inset v-for="(data, index) in dataList" :key="'dataList-' + index" class="data-row van-hairline--bottom" >
            <van-cell :title="'金额：' + data.price" :label="data.createTime">
<!--              <template #title>-->
<!--                <div style="width: 100%;text-align: right;color:#32434C;font-size:16px;">{{data.createTime}}</div>-->
<!--              </template>-->
              <template #value>
                <div style="width: 100%;text-align: right;font-size:14px;">
                  <div>{{data.stateDesc}}</div>
                  <div>
                    <van-button v-if="data.state === 1" type="success" size="mini" @click.prevent.stop="goPay(data)" style="width:50%;">
                      收款
                    </van-button>
                  </div>
                </div>
              </template>
<!--              <template #label>-->
<!--                <div style="width: 100%;text-align: left;font-size:12px;">{{data.createTime}}</div>-->
<!--              </template>-->
            </van-cell>
          </van-cell-group>
          <!--        <van-row >-->
          <!--          <van-col :span="12" class="data-cell">{{data.createTime}}</van-col>-->
          <!--          <van-col :span="6" class="data-cell">{{data.price}}</van-col>-->
          <!--          <van-col :span="6" class="data-cell">{{data.state}}</van-col>-->
          <!--        </van-row>-->
        </van-list>
      </van-pull-refresh>
    </section>
  </div>

</template>

<style scoped>
.title-cell {
  height:5vh;
  font-size:18px;
  line-height: 5vh;
  text-align: center;
}
.data-cell {
  color:grey;
  height:5vh;
  font-size:16px;
  line-height: 5vh;
  text-align: center;
  margin-bottom: 1vh;
}
.title-row {
  background:#fff;
}
.data-row {
  margin:1vh 0;
}
</style>
